<script setup>
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
const { t } = useI18n();
defineProps({
  row: {
    type: Object,
    default: () => ({}),
  },
});
const similarityList = computed(() => ({
  1: t('om.Perfectmatch'),
  2: t('om.Mismatch'),
  3: t('om.Modeltobeconfirmed'),
  4: t('mall.brand_to_be_confirmed'),
  5: t('om.Modelandbrand'),
  6: t('om.Confirmed'),
}));
</script>
<template>
  <div class="component-column">
    <!-- <el-image class="image" :src="row" :fit="fit" /> -->
    <ul>
      <li>
        <span class="desc"
          >{{ $t('om.Compatibility') }}：<span :class="row.similarity != 1 ? 'active' : ''">{{
            similarityList[row.similarity]
          }}</span></span
        >
      </li>
      <li>
        <span class="desc">{{ $t('om.SupplierName') }}：{{ row.supplierName }}</span>
      </li>
      <li>
        <span class="desc"
          >{{ $t('om.Supplierinternalmodel') }}：
          <span :class="row.similarity != 1 ? 'active' : ''">{{ row.matchManufacturerPn }}</span>
        </span>
      </li>
      <li>
        <span class="desc">{{ $t('om.StandardPackingQuantity') }}: {{ row.supplyQuantity }}</span>
      </li>
      <li>
        <span class="desc">{{ $t('om.Vendorinventory') }}：{{ row.stock }}</span>
      </li>
      <!-- <li>
        <span class="desc">数据手册：<el-link type="primary" class="link-btn">下载</el-link> </span>
      </li> -->
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.component-column {
  display: flex;
  align-items: center;
  text-align: left;
  > .image {
    width: 72px;
    height: 72px;
    margin-right: 8px;
  }
  .desc {
    color: #383838;
    font-size: 12px;
    font-weight: 400;
  }
  .link-btn {
    font-size: 12px;
  }
}
.active {
  color: red;
}
</style>
